<template>
  <div>
    <el-button
      type="danger"
      :icon="Plus"
      style="float: left; margin-left: 10px; width: 100px; height: 40px"
      >新增</el-button
    >&emsp;
    <el-button
      :disabled="!buttonDisable"
      type="danger"
      :icon="Check"
      @click="submitForm"
      style="float: left; margin-left: 25px; width: 100px; height: 40px"
      >保存</el-button
    >&emsp;
    <el-button
      :disabled="!buttonDisable"
      type="danger"
      @click="delDomain"
      :icon="Back"
      style="float: left; margin-left: 25px; width: 100px; height: 40px"
      >撤销</el-button
    >&emsp;
    <el-button
      :disabled="!buttonDisable"
      type="danger"
      :icon="Delete"
      style="float: left; margin-left: 25px; width: 100px; height: 40px"
      >删除</el-button
    >
  </div>
  <br />
  &emsp;
  <div style="font-size: 22px">
    转舍日期：<el-date-picker
      v-model="ProDates"
      type="date"
      placeholder="Pick a date"
      :default-value="new Date()"
      style="width: 200px"
    />
    羊只类型：<el-radio-group v-model="sleepType" >
      <el-radio label="种母" :value="1" size="large">种母</el-radio>
      <el-radio label="种公" :value="2" size="large">种公</el-radio>
      <el-radio label="后裔" :value="3" size="large">后裔</el-radio>
    </el-radio-group>
    &nbsp;&nbsp; &nbsp;&nbsp; 单据号：<el-input
      v-model="proCodes"
      style="width: 200px"
      disabled
    >
    </el-input>
    &nbsp;&nbsp; &nbsp;&nbsp; 流水号：
    <el-input v-model="weater" style="width: 200px" disabled> </el-input>
  </div>

  <br /><br />
  <hr style="font-size: 20px" />
  <br />

  <div class="table-container" style="height: 400px; position: relative">
    <table style="border-collapse: collapse">
      <tr>
        <td>序号</td>
        <td>耳号</td>
        <td>转出栋舍</td>
        <td>转出栏位</td>
        <td>品种</td>
        <td>性别</td>
        <td>转入栋舍</td>
        <td>转入栏位</td>
        <td>转舍类型</td>
      </tr>
      <tr v-for="(ruleForm, index) in loge.healthArray">
        <td>
          {{ ruleForm.indexNumber }}
        </td>
        <td>
          <el-select
            style="width: 100px"
            v-model="ruleForm.earNo"
            placeholder="请选择"
            @change="getearMsg(index)"
          >
            <el-option
              v-for="item in eweData.filter((c:any)=>c.stayStatus==1)"
              :label="item.earNumber"
              :value="item.sleepInforId"
              
            />
          </el-select>
        </td>
        <td>
          <el-select
            style="width: 100px"
            v-model="ruleForm.ouBarn"
            placeholder="无数据"
            disabled
          >
            <el-option
              v-for="item in Recordcottage"
              :label="item.cottageName"
              :value="item.cottagesId"
            />
          </el-select>
        </td>
        <td>
          <el-select
            style="width: 100px"
            v-model="ruleForm.outPen"
            placeholder="无数据"
            disabled
          >
            <el-option
              v-for="item in Fields"
              :label="item.fieIdName"
              :value="item.fieIdId"
            />
          </el-select>
        </td>
        <td>
          <el-select
            style="width: 120px"
            v-model="varietyId"
            clearable
            disabled
          >
            <el-option
              v-for="item in SearchVariety"
              :label="item.varietyName"
              :value="item.varietyId"
            />
          </el-select>
        </td>
        <td>
          <el-select
            style="width: 120px"
            v-model="gender"
            clearable
            disabled
          >
            <el-option label="公" :value="1" />
            <el-option label="母" :value="2" />
          </el-select>
        </td>
        <td>
          <el-select v-model="ruleForm.transferBarn" style="width: 100px" placeholder="无数据" @change="getFields2(ruleForm.transferBarn,index)" >
            <el-option 
              v-for="item in Recordcottage2"
              :label="item.cottageName"
              :value="item.cottagesId"
            />
          </el-select>
        </td>
        <td style="width: 200px">
          <el-select v-model="ruleForm.transferPen" style="width: 100px" placeholder="无数据">
            <el-option
              v-for="item in Fields2"
              :label="item.fieIdName"
              :value="item.fieIdId"
            />
          </el-select>
        </td>
         <td>
          <el-select
            style="width: 100px"
            v-model="ruleForm.sheepTransferTypeId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in transferType"
              :label="item.sheepTransferTypeName"
              :value="item.sheepTransferTypeId"
            />
          </el-select>
        </td>
      </tr>
    </table>
  </div>
  <div style="bottom: 0; left: 0; width: 100%">
    <hr />
    
    &emsp;
    <br />
    <hr />
    <span style="vertical-align: top; width: 5%">&emsp; 备注</span>&emsp;
    <el-input type="textarea" style="width: 85%" placeholder="请输入备注信息" v-model="remark" />
  </div>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Back,
  Plus,
  Setting,
  SuccessFilled,
  Minus,
  Close
} from '@element-plus/icons-vue';
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
//获取雪花id(单据号、流水号)
const getIds1 = () => {
  axios
    .post('http://localhost:5039/api/ProductionManagement/GetId', {})
    .then((res) => {
      proCodes.value = res.data;
      //第一条单据号（需要单独赋值）
      loge.healthArray[0].documentNo = JSON.stringify(res.data);
      //console.log(loge.healthArray)
    });
};

//备注
const remark = ref('')
//羊只类型
const sleepType = ref('')
//性别
const gender=ref('')
//流水号
const weater = ref('');

const getIds2 = () => {
  axios
    .post('http://localhost:5039/api/ProductionManagement/GetId', {})
    .then((res) => {
      weater.value = res.data;
       loge.healthArray[0].serialNo = JSON.stringify(res.data);
    });
};


//品种显示
const varietyId:any=ref('')
//品种
const SearchVariety: any = ref([]);

const getSearchVariety = () => {
  axios
    .get('http://localhost:5039/api/SleepBegin/SearchVariety')
    .then((res) => {
      console.log(res.data.data)
      SearchVariety.value = res.data.data;
    });
};

//期初日期
const ProDates = new Date();

//单号
const proCodes = ref('');

//序号
const numbers = ref(1);
const loge = reactive({
  healthArray: <any>[
    reactive({
      indexNumber: numbers.value,
      transferDate: '',
      documentNo: '',
      serialNo: '',
      earNo: '',
      transferBarn: '',
      transferPen: '',
      ouBarn: '',
      outPen: '',
      notes: '',
      sheepTransferTypeId: '',
      createId:counterStore.employeeId


    })
  ]
});

//按钮禁用条件
const buttonDisable = computed(() => {
  return loge.healthArray.length > 0;
});


//减行
const delDomain = () => {
  loge.healthArray.splice(loge.healthArray.length - 1, 1);
};

//获取转舍类型信息
const transferType: any = ref([])
const getTransferType = () => {
  axios.get("http://localhost:5039/api/ProductionManagement/SheepTransferTypeSearch").then(res => {
    transferType.value = res.data.data
    console.log(res.data)
  })
}

//获取栋舍
const Recordcottage = ref<any>([]);
const Recordcottage2 = ref<any>([]);
const getRecordcottage = () => {
  axios
    .post('http://localhost:5039/api/Cottages/CottageList', {})
    .then((res) => {
      Recordcottage.value = res.data.data;
      Recordcottage2.value = res.data.data;
    });
};
//获取栏位
const Fields = ref<any>([]);
const Fields2 = ref<any>([]);
const getFields = (id: number) => {
  console.log(id);
  axios
    .post('http://localhost:5039/api/Cottages/SearchFields', {
      cottagesId: id,
      pageIndex: 1,
      pageSize: 10
    })
    .then((res) => {
      console.log(res.data.data);
      Fields.value = res.data.data;
    });
};
const getFields2 = (id: number, index: any) => {
  Fields2.value = [];
  axios
    .post('http://localhost:5039/api/Cottages/SearchFields', {
      cottagesId: id,
      pageIndex: 1,
      pageSize: 10
    })
    .then((res) => {
      Fields2.value = res.data.data;
      // loge.healthArray[index].TransferPen = '';
      console.log(Fields2.value);
    });
};


//通过耳号和状态获取 羊只的信息
const getearMsg = (index: any) => {
  const selectedEweID = loge.healthArray[index].earNo; // 获取选中的 EweID
  console.log(selectedEweID);
  axios
    .get('http://localhost:5039/api/ProductionManagement/EarMasList', {
      params: {
        SleepInforId: selectedEweID,
        BreedStatuId: 0
      }
    })
    .then((res) => {
      console.log(res.data.item); 
      getFields(res.data.item.recordcottageId)
       loge.healthArray[index].transferDate= ProDates
      loge.healthArray[index].ouBarn = res.data.item.recordcottageId
      loge.healthArray[index].outPen = res.data.item.fieIdId
      loge.healthArray[index].notes = remark.value
      gender.value=res.data.item.gender
      sleepType.value = res.data.item.sleepTypeId
      varietyId.value = res.data.item.varietyId
      console.log(loge.healthArray[index])
    });
};

//获取耳号
const eweData = ref<any>([]);
const geteweData = () => {
  axios
    .get('http://localhost:5039/api/SleepBegin/SelectEar')
    .then((res) => {
      eweData.value = res.data.item;
    });
};

const submitForm = () => {

  console.log(loge.healthArray)
  
  axios
    .post('http://localhost:5039/api/ProductionManagement/SheepTransferCreate', loge.healthArray[0])
    .then((res) => {
      if (res.data.code > 0) {
        ElMessage({
          message: '添加成功',
          type: 'success'
        });
        router.push('/SheepTransferList');
      } else {
        ElMessage.error("添加失败");
        return
      }
    });
};

onMounted(() => {
  getIds1();
  getIds2();
  getRecordcottage();
  geteweData();
  getSearchVariety();
  getTransferType();
});
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
  border-top: 3px solid red;
  /* 设置顶部边框为3px宽度的红色 */
  padding: 10px;
  text-align: center;
}

/* 设置 td 的样式 */

table td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  height: 60px;
  width: 150px;
  white-space: nowrap; /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
  max-width: 100%;
  overflow-x: auto; /* 启用水平滚动 */
  margin: 20px 0; /* 设置容器的外边距 */
}
:deep(.el-input__wrapper) {
  box-shadow: none;
  text-align: center;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
::v-deep(.center-input .el-input__inner) {
  text-align: center;
}
</style>
